<template>
  <view class="container">
    <!-- 步骤标题 -->
    <view class="step-title-container" v-if="currentStep < 4">
      <text class="step-number">{{ String(currentStep).padStart(2, '0') }}</text>
      <text class="step-title">{{ stepTitles[currentStep-1] }}</text>
      <text class="step-hint" v-if="currentStep === 2">选择或上传一张房间照片，让AI为您打造独特的装饰效果</text>
    </view>
    
    <!-- 加载动画遮罩层 -->
    <view class="preview-overlay" v-if="generationStatus.isGenerating">
      <view class="analyzing-box">
        <view class="loading-ring"></view>
        <text class="analyzing-text">{{ generationStatus.message }}</text>
        <view class="analyzing-progress">
          <view class="progress-track">
            <view class="progress-bar" :style="{ width: generationStatus.progress + '%' }"></view>
          </view>
          <text class="progress-text">{{ Math.round(generationStatus.progress) }}%</text>
        </view>
      </view>
    </view>
    
    <!-- 步骤1: 选择风格模板 -->
    <view class="step-content" v-if="currentStep === 1">
      <view class="style-selection-container">
        <view 
          v-for="style in styleTemplates" 
          :key="style.id"
          class="style-selection-item"
          :class="{ 'style-selection-active': selectedStyle === style.id }"
          @click="selectStyle(style.id)"
        >
          <image 
            v-if="style.imageUrl" 
            :src="style.imageUrl" 
            mode="aspectFill" 
            class="style-image"
          />
          <text class="style-name">{{ style.name }}</text>
          <view class="selection-indicator" v-if="selectedStyle === style.id"></view>
        </view>
      </view>
    </view>
    
    <!-- 步骤2: 选择房间照片 -->
    <view class="step-content" v-if="currentStep === 2">
      <!-- 预览区域 -->
      <view class="preview-container" v-if="roomPreview">
        <image 
          :src="roomPreview" 
          mode="aspectFill" 
          class="preview-image"
          @load="onPreviewImageLoad"
          @error="onPreviewImageError"
        />
      </view>
      
      <!-- 房间选择区域 -->
      <scroll-view scroll-y class="room-selection-scroll">
        <view class="room-selection-container">
          <view 
            v-for="room in roomTemplates" 
            :key="room.id"
            class="room-selection-item"
            :class="{ 'room-selection-active': selectedRoom === room.id }"
            @click="selectRoom(room.id)"
          >
            <view class="image-loading" v-if="!room.imageLoaded"></view>
            <image 
              v-if="room.imageUrl" 
              :src="room.imageUrl" 
              mode="aspectFill" 
              class="room-image"
              @load="() => onRoomImageLoad(room.id)"
              @error="(e) => onRoomImageError(e, room.id)"
            />
            <text class="room-name">{{ room.name }}</text>
          </view>
          
          <!-- 上传自定义房间 -->
          <view 
            class="room-selection-item upload-room"
            :class="{ 'room-selection-active': selectedRoom === 'custom' }"
            @click="uploadCustomRoom"
          >
            <text class="upload-icon">+</text>
            <text class="upload-text">上传我的房间照片</text>
          </view>
        </view>
      </scroll-view>
      
      <!-- 错误提示 -->
      <view class="error-message" v-if="generationStatus.error">
        {{ generationStatus.error }}
      </view>
    </view>
    
    <!-- 步骤3: 关键词 -->
    <view class="step-content" v-if="currentStep === 3">
      <text class="keyword-title" user-select>关键词（非必选）</text>
      
      <view class="keyword-categories">
        <view 
          v-for="category in keywordCategories" 
          :key="category.type"
          class="keyword-category"
          :class="{ 'category-active': currentCategory === category.type }"
          @click="selectCategory(category.type)"
        >
          <text class="category-icon">{{ category.icon }}</text>
          <text class="category-name" user-select>{{ category.name }}</text>
        </view>
      </view>
      
      <view class="keyword-grid">
        <view 
          v-for="keyword in filteredKeywords" 
          :key="keyword.id"
          class="keyword-item" 
          :class="{ 'keyword-selected': selectedKeywords.includes(keyword.promptValue) }"
          @click="toggleKeyword(keyword)"
        >
          <text class="keyword-icon">{{ keyword.icon }}</text>
          <text class="keyword-text" user-select>{{ keyword.name }}</text>
        </view>
      </view>
      
      <view class="selected-keywords" v-if="selectedKeywords.length > 0">
        <text class="selected-title" user-select>已选择的关键词：</text>
        <view class="selected-tags">
          <view 
            v-for="keyword in selectedKeywordObjects" 
            :key="keyword.promptValue"
            class="selected-tag"
          >
            <text class="tag-icon">{{ keyword.icon }}</text>
            <text class="tag-text" user-select>{{ keyword.name }}</text>
            <text class="remove-icon" @click.stop="removeKeyword(keyword)">×</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 结果页面 -->
    <view class="result-container" v-if="currentStep === 4">
      <view class="result-header">
        <view class="result-date">{{ formattedDate }}</view>
        <view class="result-actions">
          <view class="action-button share" @click="shareArtwork">
            <text class="action-icon">↗</text>
            <text class="action-text">分享</text>
          </view>
          <view class="action-button download" @click="downloadArtwork">
            <text class="action-icon">↓</text>
            <text class="action-text">保存</text>
          </view>
        </view>
      </view>
      
      <view class="artwork-preview">
        <image :src="roomPreview" mode="aspectFill" class="room-preview-image"></image>
        <view class="artwork-overlay">
      <view class="artwork-info">
        <view class="artwork-title">
              <text>✏️ 我的AI装饰画</text>
        </view>
        <view class="artwork-tags">
          <text v-for="(tag, index) in resultTags" :key="index">#{{ tag }}</text>
            </view>
          </view>
        </view>
      </view>
      
      <view class="action-buttons">
        <view class="action-button refresh" @click="resetAndCreate">
          <text class="action-icon">↻</text>
          <text class="action-text">重新生成</text>
        </view>
        <view class="action-button like" @click="likeArtwork">
          <text class="action-icon">♡</text>
          <text class="action-text">点赞</text>
        </view>
      </view>
    </view>
    
    <!-- 底部标签和上拉面板 -->
    <view class="bottom-tags-container">
      <!-- 折叠状态下的标签按钮 -->
      <view class="bottom-tags" v-if="!tagPanelExpanded || currentStep === 4">
        <view 
          class="bottom-tag" 
          :class="{ 'active-tag': selectedTags.includes(1) }"
          @click="expandTagPanel('wool')"
        >
          <text class="bottom-tag-icon">🧶</text>
        <text>羊毛编织</text>
      </view>
        <view 
          class="bottom-tag" 
          :class="{ 'active-tag': selectedTags.includes(2) }"
          @click="expandTagPanel('cream')"
        >
          <text class="bottom-tag-icon">🏠</text>
          <text>奶油风...</text>
      </view>
        <view 
          class="bottom-tag" 
          :class="{ 'active-tag': selectedKeywords.includes('独角兽') }"
          @click="expandTagPanel('unicorn')"
        >
          <text class="bottom-tag-icon">🦄</text>
          <text>独角兽</text>
        </view>
      </view>
      
      <!-- 展开状态的标签面板 -->
      <view class="tag-panel" v-if="tagPanelExpanded" @click.stop="tagPanelExpanded = false">
        <view class="tag-panel-content" @click.stop>
          <!-- 羊毛编织面板 -->
          <view class="expanded-panel wool-panel" v-if="currentTagPanel === 'wool'">
            <view class="panel-header">
              <text class="panel-title">羊毛编织</text>
              <text class="panel-close" @click="tagPanelExpanded = false">×</text>
            </view>
            <view class="panel-options">
              <view class="grid-container">
                <view 
                  v-for="style in styleTemplates" 
                  :key="style.id"
                  class="grid-item"
                  :class="{ 'selected-item': selectedStyle === style.id }"
                  @click="selectStyleAndClose(style.id)"
                >
                  <image 
                    v-if="style.imageUrl" 
                    :src="style.imageUrl" 
                    mode="aspectFill" 
                    class="room-image"
                  />
                  <text class="item-name">{{ style.name }}</text>
                  <view class="selection-dot" v-if="selectedStyle === style.id"></view>
                </view>
              </view>
            </view>
          </view>
          
          <!-- 奶油风卧室面板 -->
          <view class="expanded-panel cream-panel" v-if="currentTagPanel === 'cream'">
            <view class="panel-header">
              <text class="panel-title">奶油风卧室</text>
              <text class="panel-close" @click="tagPanelExpanded = false">×</text>
            </view>
            <view class="panel-options">
              <view class="grid-container">
                <view 
                  v-for="room in roomTemplates" 
                  :key="room.id"
                  class="grid-item"
                  :class="{ 'selected-item': selectedRoom === room.id }"
                  @click="selectRoomAndClose(room.id)"
                >
                  <image 
                    v-if="room.imageUrl" 
                    :src="room.imageUrl" 
                    mode="aspectFill" 
                    class="room-image"
                  />
                  <text class="item-name">{{ room.name }}</text>
                  <view class="selection-dot" v-if="selectedRoom === room.id"></view>
                </view>
                <view class="grid-item" @click="uploadRoomAndClose">
                  <text class="item-name">上传我的房间</text>
                </view>
              </view>
            </view>
          </view>
          
          <!-- 独角兽面板 -->
          <view class="expanded-panel unicorn-panel" v-if="currentTagPanel === 'unicorn'">
            <view class="panel-header">
              <text class="panel-title">关键词</text>
              <text class="panel-close" @click="tagPanelExpanded = false">×</text>
            </view>
            <view class="panel-options">
              <view class="grid-container">
                <view 
                  v-for="style in styleTemplates" 
                  :key="style.id"
                  class="grid-item"
                  :class="{ 'selected-item': selectedStyle === style.id }"
                  @click="selectStyleAndClose(style.id)"
                >
                  <image 
                    v-if="style.imageUrl" 
                    :src="style.imageUrl" 
                    mode="aspectFill" 
                    class="room-image"
                  />
                  <text class="item-name">{{ style.name }}</text>
                  <view class="selection-dot" v-if="selectedStyle === style.id"></view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 底部按钮 -->
    <view class="bottom-button" @click="continueGenerate">
      {{ currentStep === 3 ? '开始生成' : '下一步' }}
    </view>
    
    <!-- 房间照片显示区域 -->
    <view class="room-photo-container" v-if="customRoomUrl">
      <image :src="customRoomUrl" mode="aspectFit" class="room-photo" @tap="previewImage"></image>
      <view class="photo-actions">
        <view class="photo-action-btn" @tap="retakePhoto">
          <text class="action-icon">🔄</text>
          <text>重新拍摄</text>
        </view>
        <view class="photo-action-btn" @tap="removePhoto">
          <text class="action-icon">❌</text>
          <text>删除照片</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { createRecord, getRecordDetail, getLatestRecords, generatePreview as generatePreviewAPI, 
  generateDecorationImage, generateFromText, generateFromImage, updateRecord } from '@/api/decoration'
import { listStyleTemplates } from '@/api/style'
import { listRoomTemplates } from '@/api/room'
import { listEnabledKeywords } from '@/api/keyword'
import { BASE_URL } from '@/utils/config'

// 辅助函数，用于显示加载指示器
const showLoading = (title = '加载中...') => {
  uni.showLoading({
    title,
    mask: true
  });
};

// 辅助函数，用于隐藏加载指示器
const hideLoading = () => {
  uni.hideLoading();
};

// 辅助函数，用于显示消息提示
const showToast = (title, icon = 'none', duration = 1500) => {
  uni.showToast({
    title,
    icon,
    duration
  });
};

// 当前装饰画数据
const currentDecoration = ref({
  id: null,
  styleId: null,
  roomId: null,
  tags: [],
  keywords: [],
  status: 0,
  resultImageUrl: '',
  previewImageUrl: '',
  errorMessage: ''
})

// 上传面板状态
const showUploadPanel = ref(false)

// 风格模板列表
const styleTemplates = ref([])

// 房间模板列表
const roomTemplates = ref([])

// 关键词分类
const keywordCategories = ref([
  { type: 'all', name: '全部', icon: '🔍' },
  { type: 'theme', name: '主题', icon: '🌟' },
  { type: 'style', name: '风格', icon: '🎨' }
])

// 选中项
const selectedStyle = ref(null)
const selectedRoom = ref(null)
const selectedTags = ref([])
const selectedKeywords = ref([])

// 生成的作品
const generatedArtwork = ref('')
// 房间预览
const roomPreview = ref('')

// 日期
const formattedDate = computed(() => {
  const now = new Date()
  return `${now.getFullYear()}年${String(now.getMonth() + 1).padStart(2, '0')}月${String(now.getDate()).padStart(2, '0')}日 ${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}`
})

// 步骤标题
const stepTitles = [
  '选择喜欢的风格模板',
  '选择/上传房间照片',
  '关键词（非必选）'
]

// 关键词列表
const keywordOptions = ref([])

// 根据分类过滤关键词
const filteredKeywords = computed(() => {
  if (!keywordOptions.value) return [];
  
  if (currentCategory.value === 'all') {
    return keywordOptions.value;
  }
  
  return keywordOptions.value.filter(keyword => {
    if (currentCategory.value === 'theme') {
      return keyword.category === '主题';
    } else if (currentCategory.value === 'style') {
      return keyword.category === '风格';
    }
    return false;
  });
})

// 当前选中的关键词分类
const currentCategory = ref('all')

// 当前步骤
const currentStep = ref(1)

// 标签面板状态
const tagPanelExpanded = ref(false)
const currentTagPanel = ref(null)

// 自定义房间URL
const customRoomUrl = ref('')

// 生成状态
const generationStatus = ref({
  isGenerating: false,
  progress: 0,
  message: ''
})

// 预览状态
const previewStatus = ref({
  isGenerating: false,
  progress: 0,
  message: ''
})

// 结果标签
const resultTags = ref([])

// 是否已点赞
const isLiked = ref(false)

// 监听选择变化，自动生成预览
watch([selectedStyle, selectedRoom, selectedKeywords], async ([newStyleVal, newRoomVal]) => {
  if (newStyleVal && newRoomVal) {
    await generatePreview();
  }
}, { deep: true });

// 获取当前用户ID
const getCurrentUserId = () => {
  try {
    const userInfo = uni.getStorageSync('userInfo');
    if (userInfo && userInfo.userId) {
      return userInfo.userId;
    }
    return 1; // 默认用户ID设置为1
  } catch (error) {
    console.error('获取用户ID失败:', error);
    return 1; // 错误时也返回1
  }
}

// 加载风格模板列表
const loadStyleTemplates = async () => {
  try {
    showLoading('加载风格模板...');
    const response = await listStyleTemplates();
    if (response.code === 200) {
      styleTemplates.value = response.data;
    } else {
      console.warn('加载风格模板失败:', response.msg);
      showToast('加载风格模板失败');
    }
  } catch (error) {
    console.error('加载风格模板失败:', error);
    showToast('加载风格模板失败');
  } finally {
    hideLoading();
  }
}

// 加载房间模板列表
const loadRoomTemplates = async () => {
  try {
    showLoading('加载房间模板...');
    const response = await listRoomTemplates();
    if (response.code === 200) {
      roomTemplates.value = response.data;  // 直接使用API返回的数据，不做映射
    } else {
      console.warn('加载房间模板失败:', response.msg);
      showToast('加载房间模板失败');
    }
  } catch (error) {
    console.error('加载房间模板失败:', error);
    showToast('加载房间模板失败');
  } finally {
    hideLoading();
  }
}

// 加载关键词列表
const loadKeywords = async () => {
  try {
    showLoading('加载关键词...');
    const response = await listEnabledKeywords();
    if (response.code === 200) {
      keywordOptions.value = response.data;
    } else {
      console.warn('加载关键词失败:', response.msg);
      showToast('加载关键词失败');
    }
  } catch (error) {
    console.error('加载关键词失败:', error);
    showToast('加载关键词失败');
  } finally {
    hideLoading();
  }
}

// 重置预览状态
const resetPreviewStatus = () => {
  previewStatus.value = {
    isGenerating: false,
    progress: 0,
    message: '',
    error: null
  };
};

// 选择房间
const selectRoom = (roomId) => {
  selectedRoom.value = roomId;
  resetPreviewStatus(); // 重置预览状态
  
  // 如果已经选择了风格，生成预览
  if (selectedStyle.value) {
    // 获取房间图片URL
    let roomImageUrl = null;
    if (roomId === 'custom') {
      roomImageUrl = customRoomUrl.value;
    } else {
      const selectedRoomObj = roomTemplates.value.find(r => r.id === roomId);
      if (selectedRoomObj?.imageUrl) {
        roomImageUrl = selectedRoomObj.imageUrl;
        // 确保URL是完整的
        if (!roomImageUrl.startsWith('http')) {
          roomImageUrl = `${BASE_URL}${roomImageUrl.startsWith('/') ? '' : '/'}${roomImageUrl}`;
        }
        // 对URL进行编码
        roomImageUrl = encodeURI(roomImageUrl);
      }
    }
    
    if (roomImageUrl) {
      console.log('选择房间，使用图片URL:', roomImageUrl);
      generatePreview();
    } else {
      console.error('房间图片URL不存在');
      uni.showToast({
        title: '房间图片加载失败',
        icon: 'none'
      });
    }
  }
};

// 生成预览图片
const generatePreview = async () => {
  if (previewStatus.value.isGenerating) return;
  
  try {
    // 参数验证
    if (!selectedStyle.value) {
      throw new Error('请选择风格');
    }
    if (!selectedRoom.value) {
      throw new Error('请选择房间');
    }
    
    // 获取房间图片URL和roomId
    let roomImageUrl = null;
    let roomId = null;
    
    if (selectedRoom.value === 'custom') {
      roomImageUrl = customRoomUrl.value;
    } else {
      const selectedRoomObj = roomTemplates.value.find(r => r.id === selectedRoom.value);
      if (!selectedRoomObj?.imageUrl) {
        throw new Error('房间图片不存在');
      }
      roomImageUrl = selectedRoomObj.imageUrl;
      roomId = selectedRoomObj.id; // 设置roomId
      
      // 处理相对路径
      if (!roomImageUrl.startsWith('http') && !roomImageUrl.startsWith('wxfile://')) {
        const path = roomImageUrl.replace(/^\/+/, '');
        const encodedPath = path.split('/').map(segment => encodeURIComponent(segment)).join('/');
        roomImageUrl = `${BASE_URL}/${encodedPath}`;
      }
    }
    
    previewStatus.value = {
      isGenerating: true,
      progress: 0,
      message: '正在分析房间布局...',
      error: null
    };
    
    const userId = getCurrentUserId();
    
    // 构建提示词
    const selectedStyleObj = styleTemplates.value.find(s => s.id === selectedStyle.value);
    
    // 优化提示词结构
    const promptParts = [
      '请在房间墙面的相框内生成装饰画，保持房间其他部分基本不变',
      '画作要求：'
    ];
    
    if (selectedStyleObj?.name) {
      promptParts.push(`风格：${selectedStyleObj.name}`);
    }
    
    if (selectedKeywords.value.length > 0) {
      promptParts.push(`元素：${selectedKeywords.value.join('、')}`);
    }
    
    // 添加场景保持说明
    promptParts.push('注意：仅修改相框内的画作内容，保持房间整体布局和氛围不变');
    
    const prompt = promptParts.join('\n');
    console.log('生成提示词:', prompt);
    console.log('使用房间图片URL:', roomImageUrl);
    console.log('使用房间ID:', roomId);
    
    previewStatus.value.message = '正在生成画作...';
    previewStatus.value.progress = 30;
    
    // 调用生成接口，传入roomId
    const imageUrl = await generateFromText(userId, prompt, roomImageUrl, roomId);
    
    if (imageUrl) {
      // 确保返回的图片URL是完整的
      let finalImageUrl = imageUrl;
      
      // 添加时间戳参数，避免缓存
      if (!finalImageUrl.startsWith('data:')) {
        const separator = finalImageUrl.includes('?') ? '&' : '?';
        finalImageUrl = `${finalImageUrl}${separator}t=${Date.now()}`;
      }
      
      roomPreview.value = finalImageUrl;
      previewStatus.value = {
        isGenerating: false,
        progress: 100,
        message: '预览生成成功',
        error: null
      };
      
      // 3秒后清除成功状态
      setTimeout(() => {
        if (previewStatus.value.progress === 100) {
          resetPreviewStatus();
        }
      }, 3000);
    } else {
      throw new Error('生成预览图失败：未获取到图片URL');
    }
  } catch (error) {
    console.error('预览生成失败:', error);
    
    // 解析错误信息
    let errorMessage = error.message;
    if (errorMessage.includes('Data too long')) {
      errorMessage = '图片数据过大，请使用较小的图片';
    } else if (errorMessage.includes('url error')) {
      errorMessage = '房间图片格式无效，请重试';
    } else if (errorMessage.includes('无法访问图片')) {
      errorMessage = '无法访问房间图片，请重试';
    } else if (errorMessage.includes('API返回错误')) {
      errorMessage = '生成失败，请稍后重试';
    }
    
    previewStatus.value = {
      isGenerating: false,
      progress: 0,
      message: '生成失败',
      error: errorMessage
    };
    
    showToast(errorMessage);
  }
};

// 生成最终作品
const generateArtwork = async () => {
  if (generationStatus.value.isGenerating) return;
  
  try {
    // 设置生成状态
    generationStatus.value = {
      isGenerating: true,
      progress: 0,
      message: '正在分析房间布局...'
    };
    
    // 模拟进度更新
    const progressInterval = setInterval(() => {
      if (generationStatus.value.progress < 90) {
        generationStatus.value.progress += Math.random() * 10;
      }
    }, 500);

    const userId = getCurrentUserId();
    
    // 验证必要参数
    if (!selectedStyle.value) {
      throw new Error('请选择风格');
    }
    if (!selectedRoom.value) {
      throw new Error('请选择房间');
    }

    // 获取选中的风格对象
    const selectedStyleObj = styleTemplates.value.find(s => s.id === selectedStyle.value);
    if (!selectedStyleObj) {
      throw new Error('未找到选中的风格');
    }
    
    // 获取房间图片URL和roomId
    let roomImageUrl = null;
    let roomId = null;
    
    if (selectedRoom.value === 'custom') {
      roomImageUrl = customRoomUrl.value;
    } else {
      const selectedRoomObj = roomTemplates.value.find(r => r.id === selectedRoom.value);
      if (!selectedRoomObj?.imageUrl) {
        throw new Error('房间图片不存在');
      }
      roomImageUrl = selectedRoomObj.imageUrl;
      roomId = selectedRoomObj.id;
      
      if (!roomImageUrl.startsWith('http') && !roomImageUrl.startsWith('wxfile://')) {
        const path = roomImageUrl.replace(/^\/+/, '');
        const encodedPath = path.split('/').map(segment => encodeURIComponent(segment)).join('/');
        roomImageUrl = `${BASE_URL}/${encodedPath}`;
      }
    }

    // 构建提示词
    const promptParts = [
      '请在房间墙面的相框内生成高质量装饰画，保持房间其他部分基本不变',
      '画作详细要求：'
    ];
    
    // 添加风格要求
    promptParts.push(`1. 艺术风格：${selectedStyleObj.name}`);
    
    // 添加关键词要求
    if (selectedKeywords.value.length > 0) {
      promptParts.push(`2. 画作元素：${selectedKeywords.value.join('、')}`);
    }
    
    // 添加基本要求
    promptParts.push('3. 画作要求：高清细节、合理构图、协调色彩');
    promptParts.push('4. 注意事项：严格保持房间原有布局和氛围，只替换相框内的画作内容');
    
    // 合并提示词
    const prompt = promptParts.join('\n');
    console.log('生成提示词:', prompt);
    console.log('使用房间图片URL:', roomImageUrl);
    console.log('使用房间ID:', roomId);

    // 更新状态
    generationStatus.value.message = '正在生成画作...';
    generationStatus.value.progress = 30;

    try {
      // 调用生成接口
      const imageUrl = await generateFromText(userId, prompt, roomImageUrl, roomId);
      
      if (!imageUrl) {
        throw new Error('生成图片失败：未获取到图片URL');
      }
      
      // 更新状态
      generationStatus.value.message = '优化画作细节...';
      generationStatus.value.progress = 90;
      
      let finalImageUrl = imageUrl;
      if (!finalImageUrl.startsWith('data:')) {
        const separator = finalImageUrl.includes('?') ? '&' : '?';
        finalImageUrl = `${finalImageUrl}${separator}t=${Date.now()}`;
      }
      
      // 设置进度为100%
      generationStatus.value.progress = 100;
      generationStatus.value.message = '生成成功';
      
      // 等待进度条动画完成
      setTimeout(() => {
        // 更新生成结果
        generatedArtwork.value = finalImageUrl;
        roomPreview.value = finalImageUrl;
        currentStep.value = 4;
        
        generationStatus.value = {
          isGenerating: false,
          progress: 100,
          message: '生成成功'
        };
        
        showToast('生成成功', 'success');
      }, 500);
      
    } catch (error) {
      console.error('生成过程出错:', error);
      throw new Error(error.message || '生成失败，请重试');
    } finally {
      clearInterval(progressInterval);
    }
  } catch (error) {
    console.error('生成装饰画失败:', error);
    generationStatus.value = {
      isGenerating: false,
      progress: 0,
      message: '生成失败'
    };
    showToast(error.message || '生成失败，请重试');
  }
};

// 下载作品
const downloadArtwork = async () => {
  try {
    if (!currentDecoration.value.resultImageUrl) {
      throw new Error('装饰画图片不存在')
    }
    
    await uni.saveImageToPhotosAlbum({
      filePath: currentDecoration.value.resultImageUrl,
    success: () => {
        showToast('保存成功', 'success')
    }
  })
  } catch (error) {
    showToast(error.message || '保存失败，请重试')
    console.error('保存装饰画失败:', error)
  }
}

// 分享作品
const shareArtwork = () => {
  // 显示微信分享菜单
  uni.showActionSheet({
    itemList: ['分享给微信好友', '分享到朋友圈'],
    success: (res) => {
      if (res.tapIndex === 0) {
        // 分享给微信好友
        shareToWechatFriend();
      } else if (res.tapIndex === 1) {
        // 分享到朋友圈
        shareToWechatMoments();
      }
    }
  });
};

// 分享给微信好友
const shareToWechatFriend = () => {
  if (!roomPreview.value) {
    uni.showToast({
      title: '暂无可分享的图片',
      icon: 'none'
    });
    return;
  }

  // 构建分享参数
  const shareParams = {
    title: '我的AI装饰画',
    desc: '快来看看我用AI生成的个性化装饰画',
    imageUrl: roomPreview.value,
    path: '/pages/design/decoration',
    success: () => {
      uni.showToast({
        title: '分享成功',
        icon: 'success'
      });
    },
    fail: (err) => {
      console.error('分享失败:', err);
      uni.showToast({
        title: '分享失败',
        icon: 'none'
      });
    }
  };

  // 调用微信分享接口
  uni.share({
    provider: 'weixin',
    scene: 'WXSceneSession', // WXSceneSession表示分享给好友
    type: 0, // 图文链接
    ...shareParams
  });
};

// 分享到朋友圈
const shareToWechatMoments = () => {
  if (!roomPreview.value) {
    uni.showToast({
      title: '暂无可分享的图片',
      icon: 'none'
    });
    return;
  }

  // 构建分享参数
  const shareParams = {
    title: '我用AI生成了一幅个性化装饰画',
    imageUrl: roomPreview.value,
    path: '/pages/design/decoration',
    success: () => {
      uni.showToast({
        title: '分享成功',
        icon: 'success'
      });
    },
    fail: (err) => {
      console.error('分享失败:', err);
      uni.showToast({
        title: '分享失败',
        icon: 'none'
      });
    }
  };

  // 调用微信分享接口
  uni.share({
    provider: 'weixin',
    scene: 'WXSceneTimeline', // WXSceneTimeline表示分享到朋友圈
    type: 0, // 图文链接
    ...shareParams
  });
};

// 点赞作品
const likeArtwork = () => {
  isLiked.value = !isLiked.value
  uni.showToast({
    title: isLiked.value ? '点赞成功' : '已取消点赞',
    icon: 'none'
  })
}

// 重置并创建新作品
const resetAndCreate = () => {
  currentStep.value = 1
  currentDecoration.value = {
    id: null,
    styleId: null,
    roomId: null,
    tags: [],
    keywords: [],
    status: 0,
    resultImageUrl: '',
    previewImageUrl: '',
    errorMessage: ''
  }
  selectedStyle.value = null
  selectedRoom.value = null
  selectedKeywords.value = []
  selectedTags.value = []
  resultTags.value = []
  isLiked.value = false
  previewStatus.value = {
    isGenerating: false,
    progress: 0,
    message: ''
  }
  generationStatus.value = {
    isGenerating: false,
    progress: 0,
    message: ''
  }
}

// 继续生成
const continueGenerate = () => {
  if (currentStep.value < 4) {
    // 在最后一步（第3步）时，直接调用生成函数
    if (currentStep.value === 3) {
      // 在生成之前进行参数验证
      if (!selectedStyle.value || !selectedRoom.value) {
        showToast('请确保已选择风格和房间');
        return;
      }
      // 直接调用生成函数
      generateArtwork();
    } else {
      // 不是最后一步时，继续下一步
      if ((currentStep.value === 1 && selectedStyle.value) || 
          (currentStep.value === 2 && selectedRoom.value)) {
        currentStep.value++;
      } else {
        showToast('请完成当前步骤');
      }
    }
  }
};

// 展开标签面板
const expandTagPanel = (panelType) => {
  currentTagPanel.value = panelType
  tagPanelExpanded.value = true
}

// 选择风格并关闭面板
const selectStyleAndClose = (styleId) => {
  selectedStyle.value = styleId
  const selectedStyleTemplate = styleTemplates.value.find(style => style.id === styleId)
  if (selectedStyleTemplate) {
    selectedTags.value = [...selectedTags.value.filter(tag => tag !== 1)]
    if (selectedStyleTemplate.tags) {
      selectedTags.value.push(...selectedStyleTemplate.tags)
    }
  }
  tagPanelExpanded.value = false
  logSelections()
}

// 选择房间并关闭面板
const selectRoomAndClose = (roomId) => {
  selectedRoom.value = roomId
  const selectedRoomTemplate = roomTemplates.value.find(room => room.id === roomId)
  if (selectedRoomTemplate) {
    selectedTags.value = [...selectedTags.value.filter(tag => tag !== 2)]
    if (selectedRoomTemplate.tags) {
      selectedTags.value.push(...selectedRoomTemplate.tags)
    }
  }
  tagPanelExpanded.value = false
  logSelections()
}

// 切换关键词并关闭面板
const toggleKeywordAndClose = (keyword) => {
  const index = selectedKeywords.value.indexOf(keyword.promptValue)
  if (index > -1) {
    selectedKeywords.value.splice(index, 1)
  } else {
    if (selectedKeywords.value.length < 5) { // 最多选择5个关键词
      selectedKeywords.value.push(keyword.promptValue)
    } else {
      showToast('最多选择5个关键词')
    }
  }
  tagPanelExpanded.value = false
  logSelections()
}



// 添加日志函数
const logSelections = () => {
  console.log({
    selectedStyle: selectedStyle.value,
    selectedRoom: selectedRoom.value,
    selectedTags: selectedTags.value,
    selectedKeywords: selectedKeywords.value
  });
}

// 选择风格
const selectStyle = (style) => {
  selectedStyle.value = style;
  resetPreviewStatus(); // 重置预览状态
  
  // 如果已经选择了房间，生成预览
  if (selectedRoom.value) {
    generatePreview();
  }
}

// 选择关键词分类
const selectCategory = (type) => {
  currentCategory.value = type;
}

// 切换关键词选择
const toggleKeyword = (keyword) => {
  const index = selectedKeywords.value.indexOf(keyword.promptValue)
  if (index > -1) {
    selectedKeywords.value.splice(index, 1)
  } else {
    if (selectedKeywords.value.length < 5) { // 最多选择5个关键词
      selectedKeywords.value.push(keyword.promptValue)
    } else {
      showToast('最多选择5个关键词')
    }
  }
}

// 移除已选择的关键词
const removeKeyword = (keyword) => {
  const index = selectedKeywords.value.indexOf(keyword.promptValue)
  if (index > -1) {
    selectedKeywords.value.splice(index, 1)
  }
}

// 上传房间并关闭面板
const uploadRoomAndClose = () => {
  // 调用上传函数
  uploadCustomRoom();
  
  // 延迟关闭面板，确保上传操作完成
  setTimeout(() => {
    tagPanelExpanded.value = false;
  }, 300);
}

// 上传自定义房间照片
const uploadCustomRoom = () => {
  // 使用ActionSheet让用户选择拍照或从相册选择
  uni.showActionSheet({
    itemList: ['拍照', '从相册选择'],
    success: (res) => {
      if (res.tapIndex === 0) {
        // 选择了拍照，直接调用openCamera函数
        openCamera();
      } else if (res.tapIndex === 1) {
        // 选择了相册
        showLoading('选择图片中...');
        uni.chooseImage({
          count: 1,
          sizeType: ['compressed'],
          sourceType: ['album'],
          success: (res) => {
            hideLoading();
            if (res.tempFilePaths && res.tempFilePaths.length > 0) {
              const tempFilePath = res.tempFilePaths[0];
              console.log('选择图片成功:', tempFilePath);
              
              // 设置预览图片
              roomPreview.value = tempFilePath;
              selectedRoom.value = 'custom';
              customRoomUrl.value = tempFilePath;
              
      uni.showToast({
                title: '选择成功',
                icon: 'success'
              });
              
              // 触发预览生成
              if (selectedStyle.value) {
                generatePreview();
              }
            }
          },
          fail: (err) => {
            hideLoading();
            console.error('选择图片失败:', err);
            
            if (err.errMsg.indexOf('cancel') !== -1) {
              uni.showToast({
                title: '已取消选择',
        icon: 'none'
              });
            } else {
              uni.showToast({
                title: '选择图片失败',
                icon: 'none'
              });
            }
          }
        });
      }
    }
  });
}

// 打开相机
const openCamera = () => {
  showLoading('正在打开相机...');
  console.log('打开相机');
  
  // #ifdef MP-WEIXIN
  // 微信小程序环境下特殊处理
  try {
    uni.navigateTo({
      url: '/pages/camera/camera',
      success: function() {
        console.log('打开摄像头页面成功');
        hideLoading();
      },
      fail: function(err) {
        console.error('打开摄像头页面失败:', err);
        hideLoading();
        
        // 摄像头页面失败后尝试直接使用拍照API
        useCameraAPI();
      }
    });
  } catch (error) {
    console.error('打开摄像头页面异常:', error);
    hideLoading();
    useCameraAPI();
  }
  // #endif
  
  // #ifndef MP-WEIXIN
  // 非微信环境下使用标准API
  useCameraAPI();
  // #endif
}

// 使用拍照API
const useCameraAPI = () => {
  // 确保使用camera方式而不是album
  wx.chooseMedia({
    count: 1,
    mediaType: ['image'],
    sourceType: ['camera'],
    camera: 'back',
    success: (res) => {
      console.log('拍照成功:', res);
      
      if (res.tempFiles && res.tempFiles.length > 0) {
        const tempFilePath = res.tempFiles[0].tempFilePath;
        
        // 设置预览图片
        roomPreview.value = tempFilePath;
        selectedRoom.value = 'custom';
        customRoomUrl.value = tempFilePath;
        
        uni.showToast({
          title: '拍照成功',
          icon: 'success'
        });
        
        // 触发预览生成
        if (selectedStyle.value) {
          generatePreview();
        }
      }
    },
    fail: (err) => {
      console.error('拍照失败:', err);
      
      if (err.errMsg && err.errMsg.indexOf('cancel') !== -1) {
        uni.showToast({
          title: '已取消拍照',
          icon: 'none'
        });
      } else {
        uni.showToast({
          title: '拍照失败，请检查相机权限',
          icon: 'none'
        });
      }
    }
  });
}

// 初始化
onMounted(async () => {
  try {
    showLoading('加载中...')
    await Promise.all([
      loadStyleTemplates(),
      loadRoomTemplates(),
      loadKeywords()
    ])
    
    // 检查摄像头权限
    checkCameraPermission()
    
    // 注册相机结果监听
    uni.$on('cameraResult', (data) => {
      console.log('接收到相机结果事件:', data);
      handleCameraResult(data);
    });
  } catch (error) {
    console.error('初始化失败:', error)
    showToast('初始化失败，请重试')
  } finally {
    hideLoading()
  }
})

// 页面生命周期定义
const pageLifecycles = {
  onShow() {
    console.log('页面显示，检查相机结果');
    
    // 检查全局变量中的相机结果
    try {
      const app = getApp();
      if (app && app.globalData && app.globalData.cameraResult) {
        console.log('从全局变量中获取相机结果:', app.globalData.cameraResult);
        handleCameraResult(app.globalData.cameraResult);
        app.globalData.cameraResult = null;
      }
    } catch (err) {
      console.error('检查全局变量失败:', err);
    }
    
    // 检查当前页面的相机结果
    const currentPage = getCurrentPages()[getCurrentPages().length - 1];
    if (currentPage && currentPage.cameraResult) {
      console.log('从页面数据中获取相机结果:', currentPage.cameraResult);
      handleCameraResult(currentPage.cameraResult);
      currentPage.cameraResult = null;
    }
  }
}

defineExpose(pageLifecycles)

// 处理相机结果
const handleCameraResult = (data) => {
  if (data && data.tempImagePath) {
    console.log('处理相机结果:', data.tempImagePath);
    
    // 设置预览图片
    roomPreview.value = data.tempImagePath;
    selectedRoom.value = 'custom';
    customRoomUrl.value = data.tempImagePath;
    
    uni.showToast({
      title: '照片获取成功',
      icon: 'success'
    });
    
    // 触发预览生成
    if (selectedStyle.value) {
      generatePreview();
    }
  }
}

// 检查摄像头权限
const checkCameraPermission = () => {
  console.log('检查相机权限');
  // 在某些平台上，需要预先检查权限
  // #ifdef APP-PLUS
  uni.getSetting({
    success: (res) => {
      if (!res.authSetting['scope.camera']) {
        uni.authorize({
          scope: 'scope.camera',
          success: () => {
            console.log('相机授权成功')
          },
          fail: () => {
            showToast('请允许使用摄像头，以便拍摄房间照片', 'none', 3000)
          }
        })
      }
    }
  });
  // #endif
  
  // #ifdef MP-WEIXIN
  wx.getSetting({
    success: (res) => {
      if (!res.authSetting['scope.camera']) {
        console.log('尚未授权使用相机，尝试获取授权');
        wx.authorize({
          scope: 'scope.camera',
          success: () => {
            console.log('微信小程序相机授权成功');
          },
          fail: (err) => {
            console.error('微信小程序相机授权失败:', err);
          }
        });
  } else {
        console.log('已有相机权限');
      }
    }
  });
  // #endif
}

// 添加错误处理函数
const handleError = (error, message = '操作失败，请重试') => {
  console.error(error)
  
  // 显示错误提示
  uni.showToast({
    title: message,
    icon: 'none',
    duration: 2000
  });
  
  // 在Vue环境下，不直接操作DOM
  /*
  // 添加错误抖动效果
  const targetElement = document.querySelector('.error-target')
  if (targetElement) {
    targetElement.classList.add('error-shake')
    setTimeout(() => {
      targetElement.classList.remove('error-shake')
    }, 300)
  }
  */
}

// 继续到下一步
const goToNextStep = () => {
  if (currentStep.value < 4) {
    // 检查当前步骤是否完成
    if ((currentStep.value === 1 && !selectedStyle.value) || 
        (currentStep.value === 2 && !selectedRoom.value)) {
      showToast('请先完成当前步骤', 'none')
      return
    }
    
    // 进入下一步
    currentStep.value++
    
    // 如果进入结果页，自动生成
    if (currentStep.value === 4) {
      generateArtwork()
    }
  }
}

// 照片预览和管理方法
/**
 * 预览照片大图
 */
const previewImage = () => {
  if (!customRoomUrl.value) return;
  
  uni.previewImage({
    urls: [customRoomUrl.value],
    current: customRoomUrl.value,
    indicator: 'number',
    loop: false,
    success: () => {
      console.log('预览照片成功');
    },
    fail: (err) => {
      console.error('预览照片失败:', err);
      showToast('预览照片失败');
    }
  });
};

/**
 * 重新拍摄房间照片
 */
const retakePhoto = () => {
  uploadCustomRoom();
};

/**
 * 删除已拍摄的照片
 */
const removePhoto = () => {
  uni.showModal({
    title: '删除确认',
    content: '确定要删除当前照片吗？',
    confirmColor: '#007aff',
    success: (res) => {
      if (res.confirm) {
        customRoomUrl.value = '';
        showToast('照片已删除');
      }
    }
  });
};

// 获取已选关键词对象
const selectedKeywordObjects = computed(() => {
  return selectedKeywords.value.map(promptValue => 
    keywordOptions.value.find(k => k.promptValue === promptValue)
  ).filter(Boolean)
})

// 预览房间图片
const previewRoomImage = (imageUrl) => {
  if (!imageUrl) return;
  
  uni.previewImage({
    urls: [imageUrl],
    current: imageUrl,
    indicator: 'number',
    loop: false,
    success: () => {
      console.log('预览图片成功');
    },
    fail: (err) => {
      console.error('预览图片失败:', err);
      showToast('预览图片失败');
    }
  });
};

// 图片加载处理
const onPreviewImageLoad = () => {
  console.log('预览图片加载成功');
  // 重置预览状态
  previewStatus.value = {
    isGenerating: false,
    progress: 100,
    message: '',
    error: null
  };
};

const onPreviewImageError = (error) => {
  console.error('预览图片加载失败:', error);
  
  // 获取当前预览URL
  const currentUrl = roomPreview.value;
  if (!currentUrl) {
    console.error('预览URL为空');
    showToast('预览图片加载失败');
    return;
  }
  
  // 打印当前URL信息
  console.log('当前预览URL:', currentUrl);
  
  // 检查URL格式
  if (!currentUrl.startsWith('http') && !currentUrl.startsWith('wxfile://')) {
    console.log('URL格式不正确，尝试添加BASE_URL');
    if (BASE_URL) {
      // 确保路径正确拼接
      const path = currentUrl.startsWith('/') ? currentUrl.substring(1) : currentUrl;
      const newUrl = `${BASE_URL}/${path}`;
      console.log('更新后的URL:', newUrl);
      roomPreview.value = newUrl;
      return;
    }
  }
  
  // 重试机制
  const maxRetries = 3;
  const retryDelay = 1000; // 1秒
  
  // 从URL中提取重试次数
  let retryCount = 0;
  const retryMatch = currentUrl.match(/retry=(\d+)/);
  if (retryMatch) {
    retryCount = parseInt(retryMatch[1]);
  }
  
  if (retryCount < maxRetries) {
    const nextRetryCount = retryCount + 1;
    console.log(`尝试重新加载图片，第${nextRetryCount}次`);
    
    setTimeout(() => {
      // 构建新的URL，添加时间戳和重试参数
      const baseUrl = currentUrl.split('?')[0];
      const newUrl = `${baseUrl}?t=${Date.now()}&retry=${nextRetryCount}`;
      console.log('重试URL:', newUrl);
      roomPreview.value = newUrl;
    }, retryDelay);
  } else {
    console.error('图片加载失败，已达到最大重试次数');
    previewStatus.value = {
      isGenerating: false,
      progress: 0,
      message: '',
      error: '预览图片加载失败，请重试'
    };
    
    showToast('预览图片加载失败，请重试');
    
    // 可以选择重新生成预览
    if (selectedStyle.value && selectedRoom.value) {
      console.log('尝试重新生成预览');
      generatePreview();
    }
  }
};

// 房间图片加载处理
const onRoomImageLoad = (roomId) => {
  console.log('房间图片加载成功:', roomId);
  const room = roomTemplates.value.find(r => r.id === roomId);
  if (room) {
    room.imageLoaded = true;
  }
};

const onRoomImageError = (error, roomId) => {
  console.error('房间图片加载失败:', error);
  const room = roomTemplates.value.find(r => r.id === roomId);
  if (room) {
    // 尝试修复图片URL
    if (!room.imageUrl.startsWith('http') && !room.imageUrl.startsWith('wxfile://')) {
      const path = room.imageUrl.startsWith('/') ? room.imageUrl.substring(1) : room.imageUrl;
      room.imageUrl = `${BASE_URL}/${path}`;
      console.log('更新房间图片URL:', room.imageUrl);
    }
  }
};

</script>

<style lang="scss">
.container {
  min-height: 100vh;
  background-color: #fafafa;
  padding-bottom: 120rpx;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx 32rpx;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 100;
}

.back-button {
  font-size: 40rpx;
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 30rpx;
  background: rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
  
  &:active {
    background: rgba(0, 0, 0, 0.08);
    transform: scale(0.95);
  }
}

.header-title {
  font-size: 36rpx;
  font-weight: 600;
  background: linear-gradient(45deg, #333, #666);
  -webkit-background-clip: text;
  color: transparent;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.header-actions {
  display: flex;
  align-items: center;
}

.header-more, .header-minimize, .header-close {
  margin-left: 24rpx;
  font-size: 36rpx;
}

.steps-container {
  padding: 0 32rpx;
}

.step-item {
  padding: 30rpx 0 20rpx;
  display: flex;
  align-items: center;
  position: relative;
  
  &.active {
    .step-number, .step-title {
      font-weight: bold;
    }
  }
  
  .step-number {
    font-size: 48rpx;
    font-weight: bold;
    margin-right: 16rpx;
  }
  
  .step-title {
    font-size: 36rpx;
    font-weight: bold;
  }
}

.step-content {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 240rpx);
  padding: 0;
}

.style-grid, .room-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -12rpx;
}

.style-item, .room-item {
  width: calc(50% - 24rpx);
  margin: 12rpx;
  border-radius: 20rpx;
  overflow: hidden;
  position: relative;
  height: 240rpx;
  box-sizing: border-box;
}
  
.style-item {
  &.selected {
    border: 3rpx solid #07c160;
    box-shadow: 0 0 0 2rpx #ffffff, 0 0 0 6rpx rgba(7, 193, 96, 0.3);
    
    &::after {
      content: "";
      position: absolute;
      right: 16rpx;
      top: 16rpx;
      width: 40rpx;
      height: 40rpx;
      border-radius: 50%;
      background-color: #07c160;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: bold;
      z-index: 2;
    }
  }
  
  .style-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .style-name {
    position: absolute;
    left: 16rpx;
    bottom: 16rpx;
    color: #ffffff;
    font-size: 28rpx;
    font-weight: bold;
    text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.7);
  }
}

.room-item {
  &.selected {
    border: 3rpx solid #07c160;
    box-shadow: 0 0 0 2rpx #ffffff, 0 0 0 6rpx rgba(7, 193, 96, 0.3);
    
    &::after {
      content: "";
      position: absolute;
      right: 16rpx;
      top: 16rpx;
      width: 40rpx;
      height: 40rpx;
      border-radius: 50%;
      background-color: #07c160;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: bold;
      z-index: 2;
    }
  }
  
  .room-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .room-name {
    position: absolute;
    left: 16rpx;
    bottom: 16rpx;
    color: #ffffff;
    font-size: 28rpx;
    font-weight: bold;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
  }
}

.room-upload {
  background-color: #f9f9f9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1rpx dashed #cccccc;
  
  .upload-icon {
    font-size: 60rpx;
    color: #cccccc;
    margin-bottom: 12rpx;
  }
  
  .upload-text {
    font-size: 28rpx;
    color: #999999;
  }
}

.tags-container {
  display: flex;
  margin: 32rpx 0;
  flex-wrap: wrap;
}

.tag {
  height: 72rpx;
  padding: 0 32rpx;
  border-radius: 36rpx;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;
  margin-bottom: 16rpx;
  
  &.active {
    background-color: #e8f7ef;
    color: #07c160;
  }
  
  .tag-icon {
    margin-right: 8rpx;
  }
}

.next-btn, .generate-btn {
  width: 100%;
  height: 88rpx;
  background-color: #07c160;
  color: #ffffff;
  font-size: 32rpx;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 32rpx;
  
  &:disabled {
    background-color: #cccccc;
  }
}

.keyword-title {
  font-size: 36rpx;
  font-weight: 600;
  margin: 32rpx;
  background: linear-gradient(45deg, #333333, #666666);
  -webkit-background-clip: text;
  color: transparent;
  letter-spacing: 0.5px;
}

.keyword-categories {
  display: flex;
  padding: 0 24rpx;
  margin-bottom: 32rpx;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  
  &::-webkit-scrollbar {
    display: none;
  }
  
  .keyword-category {
    display: flex;
    align-items: center;
    padding: 12rpx 24rpx;
    margin-right: 16rpx;
    background: #f8f9fa;
    border-radius: 32rpx;
    transition: all 0.3s ease;
    flex-shrink: 0;
    
    &.category-active {
      background: #e8f7ef;
      
      .category-icon,
      .category-name {
        color: #07c160;
      }
    }
    
    .category-icon {
      font-size: 32rpx;
      margin-right: 8rpx;
      color: #666666;
    }
    
    .category-name {
      font-size: 28rpx;
      color: #666666;
      font-weight: 500;
    }
    
    &:active {
      transform: scale(0.95);
    }
  }
}

.keyword-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  padding: 0 24rpx;
  margin-bottom: 32rpx;
  
  .keyword-item {
    position: relative;
    padding: 24rpx;
    border-radius: 16rpx;
    background: #ffffff;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    border: 1rpx solid #f0f0f0;
    
    &.keyword-selected {
      background: #f0f9f4;
      border-color: #07c160;
      transform: translateY(-2rpx);
      box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.1);
      
      .keyword-icon,
      .keyword-text {
        color: #07c160;
      }
      
      &::after {
        content: '✓';
        position: absolute;
        right: 16rpx;
        width: 32rpx;
        height: 32rpx;
        background: #07c160;
        color: #ffffff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20rpx;
      }
    }
    
    .keyword-icon {
      font-size: 36rpx;
      margin-right: 12rpx;
      color: #666666;
    }
    
    .keyword-text {
      font-size: 28rpx;
      color: #333333;
      font-weight: 500;
    }
    
    &:active {
      transform: scale(0.98);
    }
  }
}

.selected-keywords {
  padding: 24rpx;
  margin-bottom: 120rpx;
  
  .selected-title {
    font-size: 28rpx;
    color: #666666;
    margin-bottom: 16rpx;
  }
  
  .selected-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12rpx;
    
    .selected-tag {
      display: flex;
      align-items: center;
      padding: 8rpx 16rpx;
      background: #e8f7ef;
      border-radius: 24rpx;
      animation: tagPop 0.3s ease;
      
      .tag-icon {
        font-size: 28rpx;
        margin-right: 8rpx;
        color: #07c160;
      }
      
      .tag-text {
        font-size: 26rpx;
        color: #07c160;
        font-weight: 500;
      }
      
      .remove-icon {
        margin-left: 8rpx;
        width: 32rpx;
        height: 32rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;
        color: #07c160;
        opacity: 0.7;
        
        &:active {
          opacity: 1;
        }
      }
    }
  }
}

@keyframes tagPop {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.result-container {
  padding: 24rpx 32rpx;
  padding-bottom: 180rpx;
  animation: slideUp 0.4s ease;
  
  .result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;

.result-date {
  font-size: 28rpx;
  color: #666666;
    }
    
    .result-actions {
      display: flex;
      gap: 16rpx;
      
      .action-button {
        display: flex;
        align-items: center;
        padding: 12rpx 24rpx;
        background-color: #f5f5f5;
        border-radius: 32rpx;
        transition: all 0.3s ease;
        
        .action-icon {
          font-size: 32rpx;
          margin-right: 8rpx;
        }
        
        .action-text {
          font-size: 28rpx;
          color: #333333;
        }
        
        &.share {
          background-color: #e8f7ef;
          color: #07c160;
        }
        
        &.download {
          background-color: #f0f7ff;
          color: #1890ff;
        }
        
        &:hover {
          transform: translateY(-2rpx);
          box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
        }
        
        &:active {
          transform: translateY(0);
          box-shadow: none;
        }
      }
    }
  }
  
  .artwork-preview {
  width: 100%;
  height: 560rpx;
    border-radius: 20rpx;
  overflow: hidden;
    position: relative;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
    margin-bottom: 24rpx;
  background-color: #f9f9f9;
    
    .room-preview-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: all 0.5s ease;
      
      &:hover {
        transform: scale(1.05);
        filter: brightness(1.05);
      }
    }
    
    .artwork-overlay {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 24rpx;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
      
      .artwork-info {
  .artwork-title {
          font-size: 36rpx;
    font-weight: bold;
          color: #ffffff;
    margin-bottom: 12rpx;
          text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
  }
  
  .artwork-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 12rpx;
    
    text {
            font-size: 24rpx;
            color: #ffffff;
            background-color: rgba(255, 255, 255, 0.2);
            padding: 4rpx 12rpx;
            border-radius: 16rpx;
            text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
          }
        }
      }
  }
}

.action-buttons {
  display: flex;
  justify-content: center;
    gap: 32rpx;
    margin-top: 32rpx;
  
  .action-button {
    display: flex;
      flex-direction: column;
    align-items: center;
      padding: 24rpx;
      background-color: #f5f5f5;
      border-radius: 20rpx;
      min-width: 160rpx;
      
      .action-icon {
        font-size: 48rpx;
        margin-bottom: 8rpx;
      }
      
      .action-text {
        font-size: 24rpx;
        color: #666666;
      }
      
      &.refresh {
        background-color: #e8f7ef;
        
        .action-icon {
          color: #07c160;
        }
      }
      
      &.like {
        background-color: #fff0f0;
        
        .action-icon {
          color: #ff4d4f;
        }
      }
    }
  }
}

.bottom-tags-container {
  position: relative;
  z-index: 100;
}

.bottom-tags {
  position: fixed;
  bottom: 140rpx;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-evenly;
  padding: 0 32rpx;
  background-color: transparent;
  z-index: 10;
  
  .bottom-tag {
    padding: 12rpx 24rpx;
    border-radius: 8rpx;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    gap: 8rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
    border: 1rpx solid #eeeeee;
    
    &.active-tag {
      background-color: #f0f9f4;
      border-color: #07c160;
      
      .bottom-tag-icon,
      text {
        color: #07c160;
      }
    }
    
    .bottom-tag-icon {
      font-size: 28rpx;
      color: #666666;
    }
    
    text {
      font-size: 26rpx;
      color: #666666;
    }
  }
}

.tag-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 200;
  display: flex;
  align-items: flex-end;
  
  .tag-panel-content {
    width: 100%;
    background-color: #ffffff;
    border-top-left-radius: 30rpx;
    border-top-right-radius: 30rpx;
    padding-bottom: env(safe-area-inset-bottom);
    animation: slideUp 0.3s ease;
    
    .expanded-panel {
      padding: 30rpx;
      
      .panel-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30rpx;
        
        .panel-title {
          font-size: 36rpx;
          font-weight: bold;
        }
        
        .panel-close {
          font-size: 34rpx;
          color: #999;
          padding: 10rpx;
          width: 40rpx;
          height: 40rpx;
          text-align: center;
          line-height: 40rpx;
        }
      }
    }
  }
}

.panel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  width: 100%;
  padding: 10rpx;
}

.panel-grid-item {
  height: 180rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: #f5f5f5;
  color: #333;

  &.panel-selected {
    border: 2rpx solid #07c160;
    
    .panel-selection-indicator {
      position: absolute;
      top: 16rpx;
      right: 16rpx;
      width: 30rpx;
      height: 30rpx;
      border-radius: 50%;
      background-color: #07c160;
    }
  }
}

// 花园奇遇选中样式特殊处理
.panel-grid-item[data-style-id="3"] {
  &.panel-selected {
    border: 2rpx solid #07c160;
  }
}

.panel-item-name {
  font-size: 32rpx;
}

.keyword-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16rpx;
  padding: 20rpx;
}

.keyword-item {
  padding: 16rpx 10rpx;
  border-radius: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f5f5;
  font-size: 28rpx;
  transition: all 0.3s ease;
  
  &.keyword-selected {
    background-color: #fff;
    border: 1rpx solid #333;
    font-weight: bold;
  }
  
  &:hover {
    transform: translateY(-2rpx);
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  }
  
  &.keyword-selected {
    animation: selectPop 0.3s ease;
  }
}

// 更新羊毛编织面板的样式
.wool-panel {
  .panel-grid-item:nth-child(6) { // 羊毛编织选项
    &.panel-selected {
      border: 2rpx solid #07c160;
    }
  }
}

// 更新关键词面板样式
.unicorn-panel {
  .grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
    padding: 20rpx;
  }
  
  .grid-item {
    height: 180rpx;
    border-radius: 16rpx;
    position: relative;
    overflow: hidden;
    background-color: #f5f5f5;
    
    &.selected-item {
      border: 2rpx solid #07c160;
      box-shadow: 0 0 10rpx rgba(7, 193, 96, 0.3);
    }
    
    .room-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
    }
    
    .item-name {
      position: absolute;
      left: 16rpx;
      bottom: 16rpx;
      color: #ffffff;
      font-size: 28rpx;
      font-weight: bold;
      text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
      z-index: 1;
    }
    
    .selection-dot {
      position: absolute;
      top: 16rpx;
      right: 16rpx;
      width: 30rpx;
      height: 30rpx;
      border-radius: 50%;
      background-color: #07c160;
      z-index: 2;
    }
  }
}

.bottom-button {
  position: fixed;
  bottom: 40rpx;
  left: 40rpx;
  right: 40rpx;
  height: 96rpx;
  background: linear-gradient(45deg, #07c160, #00b386);
  color: #ffffff;
  border-radius: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34rpx;
  font-weight: 600;
  box-shadow: 0 8rpx 24rpx rgba(7, 193, 96, 0.25);
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.98) translateY(2rpx);
    box-shadow: 0 4rpx 12rpx rgba(7, 193, 96, 0.2);
  }
}

.step-title-container {
  padding: 48rpx 32rpx 32rpx;
  
  .step-number {
    font-size: 56rpx;
    font-weight: 700;
    display: block;
    margin-bottom: 12rpx;
    background: linear-gradient(45deg, #07c160, #00b386);
    -webkit-background-clip: text;
    color: transparent;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }
  
  .step-title {
    font-size: 44rpx;
    font-weight: 600;
    color: #333;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }
}

.instructions-text {
  text-align: center;
  color: #999999;
  padding: 60rpx 0;
  font-size: 32rpx;
}

.selected-style-container,
.selected-room-container,
.selected-keywords-container {
  display: flex;
  justify-content: center;
  margin-bottom: 40rpx;
}

.selected-preview {
  width: 80%;
  height: 300rpx;
  border: 3rpx solid #07c160;
  box-shadow: 0 0 0 2rpx #ffffff, 0 0 0 6rpx rgba(7, 193, 96, 0.3);
}

.selected-keywords-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  padding: 20rpx;
}

.grid-item {
  height: 150rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background-color: #f5f5f5;
  color: #999;
  overflow: hidden;
  
  .room-image {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .item-name {
    font-size: 32rpx;
    position: relative;
    z-index: 1;
    color: #ffffff;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
  }
}

.selected-item {
  border: 2rpx solid #07c160;
  color: #333;
}

.selection-dot {
  position: absolute;
  top: 16rpx;
  right: 16rpx;
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  background-color: #07c160;
}

.item-name {
  font-size: 32rpx;
}

.grid-item[data-style-id="3"] {
  &.selected-item {
    border: 2rpx solid #07c160;
  }
}

.style-selection-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;
  padding: 24rpx;
}

.style-selection-item {
  height: 220rpx;
  border-radius: 20rpx;
  position: relative;
  overflow: hidden;
  background-color: #f0f0f0;
  transition: all 0.3s ease;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  
  &:active {
    transform: scale(0.98);
  }
  
  &.style-selection-active {
    border: 3rpx solid #07c160;
    box-shadow: 0 6rpx 16rpx rgba(7, 193, 96, 0.15);
    
    &::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(45deg, rgba(7, 193, 96, 0.2), rgba(0, 179, 134, 0.2));
      z-index: 1;
      pointer-events: none;
    }
  }
  
  .style-image,
  .room-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    
    &:hover {
      transform: scale(1.05);
    }
  }
  
  .style-name,
  .room-name {
    position: absolute;
    left: 20rpx;
    bottom: 20rpx;
    color: #ffffff;
    font-size: 28rpx;
    font-weight: 600;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
    z-index: 2;
    padding: 8rpx 16rpx;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    border-radius: 8rpx;
  }
  
  .selection-indicator {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    width: 36rpx;
    height: 36rpx;
    border-radius: 50%;
    background: #07c160;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    
    &::after {
      content: '✓';
      color: #fff;
      font-size: 24rpx;
    }
  }
}

.continue-btn {
  width: 100%;
  height: 88rpx;
  background-color: #07c160;
  color: #ffffff;
  font-size: 32rpx;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40rpx;
  margin-bottom: 20rpx;
}

.back-icon {
  font-size: 36rpx;
}

// Style specific to the active style selection for the "花园奇遇" item
.style-selection-item:nth-child(3).style-selection-active {
  border: 2rpx solid #07c160;
  
  .selection-indicator {
    display: block;
    position: absolute;
    top: 16rpx;
    right: 16rpx;
    width: 30rpx;
    height: 30rpx;
    border-radius: 50%;
    background-color: #07c160;
  }
}

.room-selection-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24rpx;
  padding: 24rpx;
  margin-bottom: 32rpx;
  
  .room-selection-item {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: 20rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
    
    &::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, 
        rgba(0, 0, 0, 0) 50%,
        rgba(0, 0, 0, 0.7) 100%);
      z-index: 1;
      pointer-events: none;
    }
    
    .room-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
    }
    
    .room-name {
      position: absolute;
      left: 16rpx;
      bottom: 16rpx;
      right: 16rpx;
      color: #ffffff;
      font-size: 28rpx;
      font-weight: 600;
      z-index: 2;
      padding: 12rpx 16rpx;
      border-radius: 8rpx;
      background: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(4px);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    &.room-selection-active {
      border: 3rpx solid #07c160;
      transform: translateY(-2rpx);
      box-shadow: 0 6rpx 16rpx rgba(7, 193, 96, 0.15);
      
      .room-image {
        transform: scale(1.05);
      }
    }
  }
}

// 添加图片加载状态
.image-loading {
  position: absolute;
  inset: 0;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  
  &::after {
    content: '';
    width: 40rpx;
    height: 40rpx;
    border: 3rpx solid #dee2e6;
    border-top-color: #07c160;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

// 优化图片错误状态显示
.image-error {
  position: absolute;
  inset: 0;
  background: #fff5f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20rpx;
  
  .error-icon {
    font-size: 48rpx;
    color: #ff4d4f;
    margin-bottom: 12rpx;
  }
  
  .error-text {
    font-size: 24rpx;
    color: #ff4d4f;
    text-align: center;
  }
}

.preview-container {
  width: 100%;
  height: 50vh;
  position: relative;
  background-color: #f5f5f5;
  overflow: hidden;
  
  .preview-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.room-selection-scroll {
  flex: 1;
  height: calc(50vh - 240rpx);
}

.room-selection-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  padding: 20rpx;
  box-sizing: border-box;
}

.room-selection-item {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 16rpx;
  overflow: hidden;
  background: #f5f5f5;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
  
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0.7) 100%
    );
    z-index: 1;
    pointer-events: none;
  }
  
  .room-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
  
  .room-name {
    position: absolute;
    left: 16rpx;
    bottom: 16rpx;
    right: 16rpx;
    color: #ffffff;
    font-size: 28rpx;
    font-weight: 600;
    z-index: 2;
    text-align: center;
  }
  
  &.room-selection-active {
    border: 3rpx solid #07c160;
    transform: translateY(-2rpx);
    box-shadow: 0 8rpx 24rpx rgba(7, 193, 96, 0.2);
    
    .room-image {
      transform: scale(1.05);
    }
    
    &::after {
      content: '✓';
      position: absolute;
      top: 16rpx;
      right: 16rpx;
      width: 40rpx;
      height: 40rpx;
      background: #07c160;
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24rpx;
      z-index: 3;
    }
  }
}

.upload-room {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border: 2rpx dashed #ced4da;
  
  &::before {
    display: none;
  }
  
  .upload-icon {
    font-size: 60rpx;
    color: #6c757d;
    margin-bottom: 16rpx;
  }
  
  .upload-text {
    font-size: 28rpx;
    color: #495057;
    font-weight: 500;
    position: static;
  }
  
  &.room-selection-active {
    background: linear-gradient(135deg, #e8f7ef, #d1f2e6);
    border-color: #07c160;
    
    .upload-icon,
    .upload-text {
      color: #07c160;
    }
  }
}

.error-message {
  position: fixed;
  left: 32rpx;
  right: 32rpx;
  bottom: 120rpx;
  background: rgba(255, 77, 79, 0.1);
  color: #ff4d4f;
  padding: 16rpx 24rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  text-align: center;
  z-index: 100;
}

.preview-overlay {
  position: fixed; // 改为fixed定位
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000; // 提高z-index确保在最上层

  .analyzing-box {
    text-align: center;
    padding: 48rpx;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 20rpx;
    backdrop-filter: blur(10px);

    .loading-ring {
      width: 96rpx;
      height: 96rpx;
      border: 4rpx solid rgba(255, 255, 255, 0.2);
      border-top-color: #07c160;
      border-radius: 50%;
      margin: 0 auto 32rpx;
      animation: spin 1s linear infinite;
    }

    .analyzing-text {
      font-size: 36rpx;
      color: #fff;
      margin-bottom: 32rpx;
      display: block;
    }

    .analyzing-progress {
      width: 400rpx;
      
      .progress-track {
        height: 6rpx;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 3rpx;
        overflow: hidden;
        margin-bottom: 12rpx;

        .progress-bar {
          height: 100%;
          background: #07c160;
          transition: width 0.3s linear;
        }
      }

      .progress-text {
        font-size: 24rpx;
        color: rgba(255, 255, 255, 0.7);
      }
    }
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style> 